<script lang="ts" setup>
import { getRoleList } from "_s/config/role";
import Search from "_c/search/index.vue";
import usePagination from "_h/usePagination";
const { pagination } = usePagination();
import type { roleInfoType } from "_s/config/role/type";
import type { QTableProps } from "quasar";
import { QChip } from "quasar";
const { notify } = useQuasar();
import { thumbStyle } from "_s/common/quasarStyle";
const diaload = defineModel<boolean>();
// const emits = defineEmits(["update"]);
const props = defineProps(["info"]);

const selected = ref<roleInfoType[]>([]);
if (props.info.roles) {
  selected.value = props.info.roles as roleInfoType[];
}

const search = ref("");
const handleSearch = () => {
  pagination.value.page = 1;
  void getdata();
};

const getpage = (props: any) => {
  pagination.value = props.pagination;
  void getdata();
};

//#region table 数据
const tableData = ref<roleInfoType[]>([]);
const getdata = async () => {
  const { code, data, msg } = await getRoleList({
    page: pagination.value.page,
    pageSize: pagination.value.rowsPerPage,
    keyword: search.value
  });
  if (code == 0) {
    tableData.value = data.data;
    pagination.value.rowsNumber = data.total;
    console.log(data);
  } else {
    notify({
      message: msg,
      type: "error"
    });
  }
};
void getdata();
//#endregion

//#region  table Columns table 数据
const tableColums = computed<QTableProps["columns"]>(() => [
  {
    name: "name",
    label: "角色名",
    align: "left",
    field: "name"
  },
  {
    name: "roles",
    label: "用户数",
    align: "left",
    field: row => {
      if (!row.userIds) return;
      const { users } = row;
      return h(QChip, { label: users.length, square: true, outline: true, color: "primary" });
    }
  }
  // {
  //   name: "status",
  //   label: "状态",
  //   align: "left",
  //   field: row => {
  //     return h(QToggle, {
  //       "checked-icon": "check",
  //       "unchecked-icon": "clear",
  //       "model-value": row.status === 1,
  //       disable: true
  //     });
  //   }
  // }
]);

//#endregion

const submit = () => {
  console.log(selected.value);
  // loading.show();
  // const roles = selected.value.map(item => item.id);
  // const { code, msg } = await postSaveUserRole({
  //   id: props.info.id,
  //   roles: roles.length > 0 ? roles.join(",") : ""
  // });
  // loading.hide();
  // if (code == 0) {
  //   notify({
  //     message: "操作成功",
  //     type: "success"
  //   });
  //   diaload.value = false;
  //   emits("update");
  // } else {
  //   notify({
  //     message: msg,
  //     type: "error"
  //   });
  // }
};

const delRole = (item: roleInfoType) => {
  const index = selected.value.findIndex(i => i.id == item.id);
  if (index > -1) {
    selected.value.splice(index, 1);
  }
};

const cancel = () => {
  diaload.value = false;
};
</script>

<template>
  <q-card class="container q-pa-lg">
    <q-card-section>
      <div class="text-h6">用户绑定角色</div>
    </q-card-section>
    <q-separator inset />
    <q-card-section>
      <div class="row">
        <!-- <div class="userlist q-mt-sm">已选择的用户 -->

        <q-list class="rolelist">
          <q-item-label header>
            <!-- <q-icon color="positive" size="sm" name="las la-user-tie"></q-icon> -->
            {{ selected.length > 0 ? "已选择的角色" : "暂未绑定角色" }}
          </q-item-label>
          <TransitionGroup name="list">
            <q-item
              dense
              class="q-mt-sm"
              v-for="item in selected"
              :key="item.id"
            >
              <!-- <q-item-section avatar top>
              <q-avatar>
                <img src="https://picsum.photos/100/100?1" />
              </q-avatar>
            </q-item-section> -->

              <q-item-section class="roleName">
                <q-item-label lines="1">{{ item.name }}</q-item-label>
                <!-- <q-item-label caption>{{ item.username }}</q-item-label> -->
              </q-item-section>
              <q-item-section
                avatar
                class="roleDel"
              >
                <q-btn
                  flat
                  size="xs"
                  color="negative"
                  icon="fa-regular fa-trash-can"
                  @click.stop="delRole(item)"
                ></q-btn>
                <!-- <q-item-label caption>{{ item.username }}</q-item-label> -->
              </q-item-section>
            </q-item>
          </TransitionGroup>
        </q-list>

        <q-separator
          vertical
          inset
        />
        <div class="userTable q-px-md q-mt-sm">
          <Search
            class="input"
            v-model="search"
            @handleSearch="handleSearch"
          ></Search>
          <q-scroll-area
            style="height: 500px"
            class="q-mt-md"
            :thumb-style="thumbStyle"
          >
            <q-table
              no-data-label="请添加用户"
              v-model:selected="selected"
              v-model:pagination="pagination"
              flat
              selection="multiple"
              bordered
              @request="getpage"
              :rows="tableData"
              :columns="tableColums"
              row-key="id"
            >
              <!-- <template v-slot:top>
                <div class="q-pt-xs" v-title>
                  <div class="text-weight-medium q-mt-xs title">
                    {{ $t("page.user.list") }}
                  </div>
                </div>
              </template> -->
            </q-table>
          </q-scroll-area>
        </div>

        <!-- <q-btn unelevated color="primary" icon="add" :label="$t('pub.add')" @click.prevent="add" /> -->
      </div>
    </q-card-section>
    <div class="text-center q-mt-lg">
      <q-btn
        unelevated
        color="primary"
        class="btn"
        :label="$t('pub.submit')"
        @click.prevent="submit"
      />
      <q-btn
        unelevated
        class="q-ml-sm btn"
        outline
        :label="$t('pub.cancel')"
        @click="cancel"
      />
    </div>
  </q-card>
</template>

<style scoped lang="scss">
.list-move, /* 对移动中的元素应用的过渡 */
.list-enter-active,
.list-leave-active {
  transition: all 0.5s ease;
}

.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

/* 确保将离开的元素从布局流中删除
  以便能够正确地计算移动的动画。 */
.list-leave-active {
  position: absolute;
}

.container {
  max-width: 1050px;
  min-height: 250px;
}
.rolelist {
  width: 200px;
}
.userTable {
  width: 600px;
}
.input {
  width: 220px;
}
.btn {
  width: 100px;
}

.roleName {
  width: 120px;
}
.roleDel {
  width: 30px;
}
</style>
